{"version": "2.0","name": "Below","subline": "Mobile & Tablet Responsive Template","username": "Enabled","created": "","website": "http://www.enableds.com","update": "","update_today": false,"email": "","description": "","intro": "","button_1_text": "","button_2_text": "","button_3_text": "","button_1_url": "","button_2_url": "","button_3_url": "","sections": [{"title": "F.A.Q","id": "f_a_q","content": "<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\t<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline;\">How do I install the item?</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tCopy and paste all the items in the code folder to your server to your desired location.&nbsp;</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\t<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline;\">What are those i class&quot;fa &quot; things?</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tThat is Font Awesome, the amazing icons we used for this item you can learn more about them and find a cheatsheet on how to use them here&nbsp;http://fortawesome.github.io/Font-Awesome/icons/</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\t<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline;\">How do I change the contact form information?</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tThere is only one PHP file in the item, please open that item and replace the email address with yours.&nbsp;</p>\n"},{"title": "Page Structure","id": "page_structure","content": "<pre class=\"html\">\n&lt;div class=&quot;all-elements&quot;&gt;\n\n    &lt;div class=&quot;navigation-background&quot;&gt;&lt;/div&gt;\n\n    &lt;div class=&quot;navigation-wrapper&quot;&gt;&lt;!-- Navigation goes here--&gt;&lt;div&gt;\n\n    &lt;div class=&quot;header&quot;&gt;&lt;!--Header goes here --&gt;\n\n    &lt;div class=&quot;header-clear&quot;&gt;&lt;/div&gt;\n\n    &lt;div class=&quot;content&quot;&gt;\n        &lt;div class=&quot;decoration transparent&quot;&gt;&lt;/div&gt;\n\n        &lt;div class=&quot;container&quot;&gt;&lt;!--Features Go Here--&gt;&lt;/div&gt;\n\n        &lt;div class=&quot;decoration&quot;&gt;&lt;/div&gt;\n\n        &lt;div class=&quot;footer&quot;&gt;&lt;!--Footer goes here--&gt;&lt;/div&gt;\n\n    &lt;/div&gt;\n\n&lt;/div&gt;</pre>\n"},{"title": "Navigation","id": "navigation","content": "<pre class=\"html\">\n&lt;div class=&quot;navigation-background&quot;&gt;&lt;/div&gt;\n&lt;div class=&quot;navigation-wrapper&quot;&gt;\n    &lt;div class=&quot;navigation-content&quot;&gt;\n        &lt;div class=&quot;navigation-scroll&quot;&gt;\n            &lt;a href=&quot;#&quot; class=&quot;navigation-logo&quot;&gt;&lt;/a&gt;\n            &lt;a href=&quot;#&quot; class=&quot;navigation-hide&quot;&gt;&lt;i class=&quot;fa fa-times&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n            &lt;div class=&quot;decoration&quot;&gt;&lt;/div&gt;\n            &lt;ul class=&quot;navigation&quot;&gt;\n                &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;active-menu&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;Active Menu&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;Inactive Menu&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n                &lt;li&gt;\n                    &lt;a class=&quot;deploy-submenu active-submenu&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-cog&quot;&gt;&lt;/i&gt;Active Submenu&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n                    &lt;ul class=&quot;submenu active-submenu&quot;&gt;\n                        &lt;li&gt;&lt;a class=&quot;active-menu&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;Submenu Item&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;&gt;Submenu Item&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;&gt;Submenu Item&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n                    &lt;/ul&gt;\n                &lt;/li&gt;                    \n                &lt;li&gt;\n                    &lt;a class=&quot;deploy-submenu&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-cog&quot;&gt;&lt;/i&gt;Inactive Submenu&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n                    &lt;ul class=&quot;submenu&quot;&gt;\n                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;&gt;Submenu Item&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;&gt;Submenu Item&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;&gt;Submenu Item&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n                    &lt;/ul&gt;\n                &lt;/li&gt;    \n                &lt;li&gt;&lt;a class=&quot;hide-navigation&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-times&quot;&gt;&lt;/i&gt;Close&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n            &lt;/ul&gt;\n            &lt;div class=&quot;navigation-socials&quot;&gt;\n                &lt;a class=&quot;facebook-color&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n                &lt;a class=&quot;google-color&quot;  href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-google-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n                &lt;a class=&quot;twitter-color&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n                &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;\n            &lt;/div&gt;\n            &lt;p class=&quot;navigation-footer&quot;&gt;Copyright 2015. All rights reserved.&lt;/p&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;        \n&lt;/div&gt; </pre>\n<p>\tLine 1 generates the navigation background when it&#39;s deployed.</p>\n<p>\tLine 2 generates the navigation wrapper, the housing background.</p>\n<p>\tLine 3 houses the navigation elements.</p>\n<p>\tLine 4 enableds the navigation to be drag scrollable. This class is vital for older operating systems on mobile devices.</p>\n<p>\tLine 5 is the navigation logo, you can replace this by opening style.css and editing line 88. We suggest using a double size logo and inserting the width, height and background size to half the value of the logo. This keeps the aspect ratio to retina / hidpi crystal clear.&nbsp;</p>\n<p>\tLine 6 is the close button of the navigation. Tapping it will hide the navigation and the background.&nbsp;</p>\n<p>\tLine 7 &nbsp;is the decoration underneeth the logo and close button.&nbsp;</p>\n<p>\tLine 8 openes the main navigation. These are the nav elements you tap on to complete an action / go to a link.</p>\n<p>\tLine 9 is an active, simple menu item.</p>\n<p>\tLine 10 is an inactive, simple menu item.&nbsp;</p>\n<p>\tLine 11 opens a submenu element</p>\n<p>\tLine 12 is the actual menu item that open the submenu. it shows as active. ( has active-submenu class )</p>\n<p>\tLine 13 houses the submenu items. it shows as deployed.&nbsp;( has active-submenu class )</p>\n<p>\tLines 14, 15, 16 are simple, default menus. Line 14&#39;s menu is active.&nbsp;</p>\n<p>\tLine 17 closes the submenu elements</p>\n<p>\tLine 18 closes the entire submenu button.&nbsp;</p>\n<p>\tLines 19 to lines 26 is still a submenu, but this one is set to hidden by default, meaning the submenu is closed.&nbsp;</p>\n<p>\tLines 29 to 34 are the social icons that appear inside the menu.&nbsp;</p>\n<p>\tLine 35 is the naivgation footer message.</p>\n<p>\tLine 36 closes the navigation scroll div.</p>\n<p>\tLine 37 closes the navigation content div</p>\n<p>\tLine 38 closes the navigation wrapper div.</p>\n<p>\t&nbsp;</p>\n<p>\t<strong>Changing the navigation height on tablets.</strong></p>\n<p>\tYou may have noticed that on tablets, the navigaiton centers on the screen and the black overlay is beeneth it. To change the height of the navigation when shown on tablets, open style.css and go to line 40.&nbsp;</p>\n<pre class=\"css\">\n@media(min-width:768px){\n    .navigation-wrapper{\n        width:300px;   \n        height:540px;\n        left:50%;\n        top:50%;\n        margin-left:-150px;\n        margin-top:-270px;\n        padding:0px;\n        border:solid 1px rgba(0,0,0,0.1);\n    }\n}</pre>\n<p>\tThe current height is set to 540 pixels and 320 pixels ide. To center it, you must set the margin left to minus half the width and the margin-top to minus-half the height.&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "Header","id": "header","content": "<pre class=\"html\">\n    &lt;div class=&quot;header&quot;&gt;\n        &lt;a href=&quot;#&quot; class=&quot;header-logo&quot;&gt;&lt;/a&gt;\n        &lt;a href=&quot;#&quot; class=&quot;header-menu show-navigation&quot;&gt;&lt;i class=&quot;fa fa-navicon&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;/div&gt;</pre>\n<p>\tLine 1 creates the header wrapper</p>\n<p>\tLine 2 creates the header logo. To edit the header logo, please open style.css and go to line 301. Remember that replacing the image is done best when using a double sized image and using half the values to maintain a high dpi / retina look on devices.</p>\n<p>\tLine 3 creates the header show navigation icon</p>\n<p>\tLine 4 closes the header.</p>\n<p>\t&nbsp;</p>\n"},{"title": "Homepage Slider","id": "homepage_slider","content": "<pre class=\"html\">\n&lt;div class=&quot;slider-container full-bottom&quot;&gt;\n    &lt;div class=&quot;homepage-slider&quot; data-snap-ignore=&quot;true&quot;&gt;                \n        &lt;div&gt;\n            &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n            &lt;div class=&quot;homepage-slider-caption homepage-left-caption&quot;&gt;\n                &lt;h3&gt;Swipe me!&lt;/h3&gt;\n                &lt;p&gt;Hope you enjoy our latest item!&lt;/p&gt;\n            &lt;/div&gt;\n            &lt;img src=&quot;images/pictures/3.jpg&quot; class=&quot;responsive-image&quot; alt=&quot;img&quot;&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\tTo create more slides simply duplicate lines 3 to 10 and replace the image and text with yours. The caption text can be left right or center and can be achieved by replacing homepage-SIDE-caption side with left center or right.&nbsp;</p>\n"},{"title": "Homepage Columns","id": "homepage_columns","content": "<pre class=\"html\">\n    &lt;p class=&quot;thumb-left no-bottom&quot;&gt;\n        &lt;img src=&quot;images/pictures/1s.jpg&quot; alt=&quot;img&quot;&gt;\n        &lt;strong&gt;Mobile app feel &lt;/strong&gt;\n        &lt;em&gt;&lt;br&gt;Lorem Ipsum is simply dummy text of the printing and typeset. &lt;/em&gt;\n    &lt;/p&gt;\n    &lt;div class=&quot;thumb-clear&quot;&gt;&lt;/div&gt;\n\n</pre>\n<p>\tLine 1 creates the container for the thumbnail with image to the left. The class must be thumb-left.</p>\n<p>\tLine 2 is the icon on the left side</p>\n<p>\tLine 3 is the title of the icon</p>\n<p>\tLine 4 is the closing container for the thumbnail column</p>\n<p>\tLine 5 clears the flotation of the columns.<br>\n\t&nbsp;</p>\n<p>\tTo create a right thumbnail, simply replace thumb-left with thumb-right and follow the exact same structure as above.&nbsp;</p>\n"},{"title": "Staff Slider","id": "staff_slider","content": "<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;a href=&quot;#&quot; class=&quot;next-staff&quot;&gt;&lt;/a&gt;\n    &lt;a href=&quot;#&quot; class=&quot;prev-staff&quot;&gt;&lt;/a&gt;\n    &lt;div class=&quot;staff-slider&quot; data-snap-ignore=&quot;true&quot;&gt;\n        &lt;div&gt;&lt;!--Duplicate Me--&gt;\n            &lt;div class=&quot;staff-item&quot;&gt;\n                &lt;img src=&quot;images/pictures/1s.jpg&quot; alt=&quot;img&quot;&gt;\n                &lt;h4&gt;John Doe&lt;/h4&gt;\n                &lt;em&gt;Web Designer&lt;/em&gt;\n                &lt;strong&gt;We love quotes, and sometimes it&#39;s&lt;/strong&gt;\n                &lt;a href=&quot;#&quot; class=&quot;button button-red center-button&quot;&gt;Call&lt;/a&gt;\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt; </pre>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tTo create more slides, simply duplicate the class that has the &lt;!--Duplicate Me--&gt; comment.</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tAfter doing so, replace the image and text with your own, and you have a new slide</p>\n"},{"title": "Footer","id": "footer","content": "<pre class=\"html\">\n        &lt;div class=&quot;footer&quot;&gt;\n            &lt;p class=&quot;center-text half-bottom&quot;&gt;\n                Copyright 2015. All rights reserved.\n            &lt;/p&gt;\n            &lt;div class=&quot;footer-icons&quot;&gt;\n                &lt;a href=&quot;#&quot; class=&quot;facebook-color facebook-social&quot;&gt;&lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n                &lt;a href=&quot;#&quot; class=&quot;google-color google-social&quot;&gt;&lt;i class=&quot;fa fa-google-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n                &lt;a href=&quot;#&quot; class=&quot;twitter-color twitter-social&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n                &lt;a href=&quot;#&quot; class=&quot;footer-up&quot;&gt;&lt;i class=&quot;fa fa-angle-up&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n            &lt;/div&gt;\n            &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;\n        &lt;/div&gt;</pre>\n<p>\tLine 1 creates the footer class</p>\n<p>\tLine 2, 3, 4 are the copyright text.</p>\n<p>\tLine 5 to 10 house the social icons the the going back to top icon.</p>\n<p>\tLine 11 closes the footer icons</p>\n<p>\tLine 12 clears the flotation</p>\n<p>\tLine 13 closes the entire footer.</p>\n"},{"title": "Is this it?","id": "is_this_it","content": "<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tNo! We have 2 documentations. This one explained the main features of the template, and it&#39;s structure. The second documentation describes the features from each indivudual page.&nbsp;</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tIf there is anything you don&#39;t understand, please send us a message http://enableds.com/html-support/ through our support page and we will gladly assist you with absolutely anything that&#39;s related to the template! We take great pride in providing top notch support to all our customers!&nbsp;</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tPlease don&#39;t forget to rate 5 stars!</p>\n"}],"use_sub": false,"logo": "","favicon": "","customcss": "","easing": "swing","easingduration": "500","bgimage": "","bgrepeat": "repeat","bgattachment": "scroll","bgcolor": "FFFFFF","textcolor": "383838","linkcolor": "0000FF","hrcolor1": "EBEBEB","hrcolor2": "FFFFFF","btncolor": "FFFFFF","btncolor1": "0088CC","btncolor2": "0044CC","sidebarbgimage": "","sidebarbgrepeat": "repeat","sidebarbgcolor": "DDDDDD","sidebartextcolor": "222222","sidebarlinkcolor": "444444","sidebaractivecolor": "444444","sidebaractivetextcolor": "DDDDDD","sidebarhrcolor1": "AAAAAA","sidebarhrcolor2": "EEEEEE","cufon": "","documentationttype": "default","itemURL": "","sendJSON": "","sendZIP": "","sendPWD": ""}